<template>
  <div class="w-[100]">
    <!-- <videoplay :autoSize="true" :isLive="true" :isautoplay="false" :videoUrl="videoUrl" id="viedos"></videoplay> -->
    <div v-if="videoUrl == ''" class="text-center ">
      <img  src="@/assets/screenimg/null-copy.png" alt="" class="mx-auto"></img>
      <div>
        未配置监控视频
      </div>
      
    </div>
    <div v-else id="mse" class="!w-full !h-full aspect-video"></div>
    <!-- <div id="mse" class="!w-full !h-full aspect-video"></div> -->
  </div>
</template>
<script setup lang="ts">
import videoplay from "@/components/videoplay/video.vue";
import Player,{ Events } from 'xgplayer';
import 'xgplayer/dist/index.min.css';
import HlsPlugin from 'xgplayer-hls'
import type { infoType } from '@/api/operate/video-management/index';
import { getDeviceVideo } from '@/api/screen/index'
const props = defineProps({
  deviceId: {
    type: String,
    default: ''
  }
})
const videoUrl = ref('')
const playDuration = ref()
const getData = async () => {
  const res = await getDeviceVideo({ deviceId: props.deviceId })
  videoUrl.value = res.result.url
  playDuration.value = res.result.playDuration
}
getData()
const timer = ref(null)
onMounted(() => {
setTimeout(() => {
        const player = new Player({
      id: 'mse',
      url:videoUrl.value,
      plugins: [HlsPlugin],
    })
    if (playDuration.value) {
          player.on(Events.PLAY, () => {
            timer.value && clearTimeout(timer.value)
            timer.value =setTimeout(() => {
        player.pause()
      }, playDuration.value * 60 * 1000);
    })
    }

}, 800)
});

onBeforeUnmount(() => {
	timer.value && clearTimeout(timer.value)
});
</script>